<template>
	<view>
		<image src="@/static/bg.png" class="vw-100 img"></image>
		<view class="position-relative top--30 px-15 ">
			<view class="bg-white box round-8 px-30 py-16   ">
				<view class="flex flex-y-center flex-x-space-between">
					<view class="border-black round-8 px-11 py-6  flex-1">
						<view class="flex flex-y-center">
							<uv-icon name='search' color="#000" size="32"></uv-icon>
							<input placeholder="请输入姓氏..." placeholder-class="fs-14 text-black flex-1"
								class="fs-14 text-black ml-7" v-model="name" @confirm="search()" />
						</view>
					</view>
					<text class="text-black fw-600 fs-17 ml-6" @confirm="search()">搜索</text>
				</view>
				<swiper :autoplay="false" style="height: 160rpx;">
					<swiper-item v-for="(item,index) in surnameList">
						<view class="flex flex-wrap grid-column-7 grid-gap-10 grid-columns-7 mt-10">
							<view class="flex " v-for="surname in item"
								@click="$page.open('/pages/avatar/search?name='+surname)">
								<view class="line-height-0 round-4 block px-6 py-4 border-black">
									{{surname}}
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="px-15">
			<text class="fw-600 fs-16 line pb-8">热门头像</text>
			<view class="flex flex-wrap flex-x-space-between grid-gap-12 py-24">
				<image class="avatar round-8" :src='item.image' v-for="(item,index) in list" :key='index'
					@click="$page.open('/pages/avatar/avatar?id='+item.id)"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { $http, $page } from '@/utils';
	const list = ref([])
	const name = ref('')
	const surnameList = ref([])
	onLoad((e) => {
		getSurname()
		getRecommend()
	})
	const getSurname = () => {
		$http.get('Avatar/getSurname').then(res => {
			let temp = []
			res.data.forEach(item => {
				if (temp.length < 14) {
					temp.push(item)
				}
				if (temp.length == 14) {
					surnameList.value.push(temp)
					temp = []
				}
			})
		})
	}

	const getRecommend = () => {
		$http.get('Avatar/getRecommend').then(res => {
			list.value = res.data
		})
	}
	const search = () => {
		if (name.value == '') {
			return;
		}
		$page.open('/pages/avatar/search?name=' + name.value)
	}
</script>

<style scoped>
	.img {
		height: 549rpx;
	}

	.box {
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(153, 145, 158, 0.1);
	}

	.line {
		background: linear-gradient(90deg, #B959FF 100%, #B959FF 100%);
		background-size: 50% 6rpx;
		background-repeat: no-repeat;
		background-position: bottom;
	}

	.avatar {
		width: 334rpx;
		height: 334rpx;
	}
</style>